<template>
    <el-select v-model="selectValue" 
                :filterable="filterable" 
                :clearable="clearable" 
                :placeholder="placeholder"
                :disabled="disabled"
                :multiple="multiple">
        <!--选项属性-->        
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            
        </el-option>
    </el-select>
</template>

<script>
export default {
    name: 'ConfigGroupSelect',
    props: {
        value: {
            type: [Number, String]
        },
        placeholder: {
            type: String,
            default: ''
        },
        filterable: {
            type: Boolean,
            default: true
        },
        clearable: {
            type: Boolean,
            default: true 
        },
        multiple: {
            type: Boolean,
            default: false 
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            options: [
                {
                    value: 'IP',
                    label: 'IP'
                },
                {
                    value: 'HEADER',
                    label: 'HEADER'
                },
                {
                    value: 'QUERY',
                    label: 'QUERY_PARAM'
                }
            ]
        }
    },
    computed: {
        selectValue: {
            get: function() {
                if (this.value == null || this.value == 'Undefined') {
                    return null;
                }
                return this.value
            },
            set: function(val) {
                // 通知父组件更新绑定值
                this.$emit('input', val)
            }
        },

    }
}
</script>

<style>

</style>